<template>
   <div id="Home" class="flex">
      <Produce id="Produce" class="flex"/>

        <LeftFun  id="LeftFun"  />
        <Article  id="Article" class="flex"/>
        <RightFun id="RightFun"  />
        <!-- <About id="About"/> -->
   </div>
</template>
<script>
import {mapState,mapActions, mapMutations} from 'vuex'
import Article from '../Home/Article/Article.vue'
import RightFun from '../Home/RightFun/RightFun.vue'
import Produce from '../Home/Produce/Produce.vue'
import About from '@/components/Blog/About/About.vue'
import LeftFun from './LeftFun/LeftFun.vue'
  export default 
  {
    components: { Article, RightFun, Produce, About, LeftFun },
    computed:{
        ...mapState('Home',['RecommendArticle','RecommendArticleState'])
    },
    methods:{
       ...mapMutations('Tool',['SETNAVIGATION'])
    },
    mounted() {
        let from =  document.documentElement.scrollTop || document.body.scrollTop || 0
        this.$public.Move(from,0,500)
    },
    activated() 
    {
      document.body.scrollTop = document.documentElement.scrollTop   = this.$route.meta.scrollTop || 0 
    },
    beforeRouteLeave(to,from,next){
        from.meta.scrollTop =  document.documentElement.scrollTop || document.body.scrollTop || 0
        next()
    },
   


  }
</script>
<style scoped lang="less">
#Home{
   align-items: flex-start;
   margin-top: 0;
}
.box{
  width: 100vw;
  background: white;
  align-items: flex-start;
}
#Produce{
  width: 100vw;
  height:100vh;
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}
#Article{
      width: 55vw;
      max-width: 1000px;  
      padding: 0 30px;
      box-sizing: border-box;
      min-width: 350px;
      min-height: 100vh;
}
#About{
    width: 100vw;
    height: 80px;
    background: rgba(0, 0, 0, 0.5);
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
}

#RightFun,#LeftFun{
   padding: 20px 30px;
   box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
}



@media screen and (min-width: 1450px) {
    #RightFun,#LeftFun{
      width: 400px;
      min-width: 400px;
      position: sticky;
      top: 10px;
  }
}
@media screen and (max-width: 1600px) {
    div#RightFun{
       display: none;
   }
   div#LeftFun{
       width: 400px;
   }
}

//只有中间内容 600 - 1450
@media screen and (max-width: 1450px) and (min-width: 600px) {
    #RightFun,#LeftFun{
      display: none;
    }
     #Article{
      width: 95vw; 
   }
}
// 0 - 600
@media screen and (max-width: 600px) {
    #RightFun{
      display: none;
    }
    div#LeftFun{
      width: calc(95vw - 60px); 
      min-width: 350px;
    }
     #Article{
       width: 95vw; 
   }
}


</style>